<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>vue | web前端面试题集锦</title>
  <meta name="keywords" content=" vue ">
  <meta name="description" content="vue | web前端面试题集锦">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta property="og:type" content="website">
<meta property="og:title" content="categories">
<meta property="og:url" content="http://blog.duans.top/categories/index.html">
<meta property="og:site_name" content="web前端面试题集锦">
<meta property="og:locale" content="zh">
<meta property="article:published_time" content="2020-03-25T03:44:47.000Z">
<meta property="article:modified_time" content="2020-03-25T03:45:03.696Z">
<meta property="article:author" content="duans">
<meta name="twitter:card" content="summary">


<link rel="icon" href="/img/avatar.jpg">

<link href="/css/style.css?v=1.0.1" rel="stylesheet">

<link href="/css/hl_theme/github.css?v=1.0.1" rel="stylesheet">

<link href="//cdn.bootcss.com/animate.css/3.5.2/animate.min.css" rel="stylesheet">
<link href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<script src="//cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="/js/jquery.autocomplete.min.js?v=1.0.1" ></script>

<script src="//cdn.bootcss.com/highlight.js/9.12.0/highlight.min.js"></script>
<script>
    hljs.initHighlightingOnLoad();
</script>

<script src="//cdn.bootcss.com/nprogress/0.2.0/nprogress.min.js"></script>



<script src="/js/iconfont.js?v=1.0.1" ></script>

<meta name="generator" content="Hexo 4.2.0"></head>
<div style="display: none">
  <input class="theme_disqus_on" value="false">
  <input class="theme_preload_comment" value="true">
  <input class="theme_blog_path" value="">
</div>

<body>
<aside class="nav">
    <div class="nav-left">
        <a href="/" class="avatar_target">
    <img class="avatar" src="/img/avatar.jpg" />
</a>
<div class="author">
    <span>duans</span>
</div>

<div class="icon">
    
        
        <a title="oschina" href="https://gitee.com/duans" target="_blank">
            
                <svg class="iconfont-svg" aria-hidden="true">
                    <use xlink:href="#icon-oschina"></use>
                </svg>
            
        </a>
        
    
        
        <a title="jianshu" href="https://www.jianshu.com/u/6345254fa137" target="_blank">
            
                <svg class="iconfont-svg" aria-hidden="true">
                    <use xlink:href="#icon-jianshu"></use>
                </svg>
            
        </a>
        
    
        
        <a title="github" href="https://github.com/duanshaobo" target="_blank">
            
                <svg class="iconfont-svg" aria-hidden="true">
                    <use xlink:href="#icon-github"></use>
                </svg>
            
        </a>
        
    
        
        <a title="email" href="mailto:duanshaobo@126.com" target="_blank">
            
                <svg class="iconfont-svg" aria-hidden="true">
                    <use xlink:href="#icon-email"></use>
                </svg>
            
        </a>
        
    
</div>




<ul>
    <li><div class="all active">全部文章<small>(22)</small></div></li>
    
        
            
            <li><div data-rel="web前端"><i class="fold iconfont icon-right"></i>web前端<small>(16)</small></div>
                
                    <ul class="sub hide">
                        
                        <li><div data-rel="前端面试题">前端面试题<small>(16)</small></div>
                            
                        </li>
                            
                    </ul>
                
            </li>
            
        
    
        
            
            <li><div data-rel="web服务器">web服务器<small>(2)</small></div>
                
            </li>
            
        
    
        
            
            <li><div data-rel="数据库">数据库<small>(2)</small></div>
                
            </li>
            
        
    
        
            
            <li><div data-rel="web后端">web后端<small>(2)</small></div>
                
            </li>
            
        
    
        
            
        
    
</ul>
<div class="left-bottom">
    <div class="menus">
    
    
    
    
    </div>
    <div></div>
</div>
<input type="hidden" id="yelog_site_posts_number" value="22">

<div style="display: none">
    <span id="busuanzi_value_site_uv"></span>
    <span id="busuanzi_value_site_pv"></span>
</div>

    </div>
    <div class="nav-right">
        <div class="friends-area">
    <div class="friends-title">
        友情链接
        <i class="back-title-list"></i>
    </div>
    <div class="friends-content">
        <ul>
            
            <li><a target="_blank" href="https://www.duans.top/">duans</a></li>
            
        </ul>
    </div>
</div>
        <div class="title-list">
    <form onkeydown="if(event.keyCode === 13){return false;}">
        <input id="local-search-input" class="search" type="text" placeholder="Search..." />
        <i class="cross"></i>
        <span>
            <label for="tagswitch">Tags:</label>
            <input id="tagswitch" type="checkbox" style="display: none" />
            <i id="tagsWitchIcon"></i>
        </span>
    </form>
    <div class="tags-list">
    
    <li class="article-tag-list-item">
        <a class="color4">vue</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color5">前端基础</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color1">react</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color2">minapp</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color1">javascript</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color3">angular</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color3">mongodb</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color2">jquery</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color1">nginx</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color1">mysql</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color2">apache</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color2">webapi</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color5">性能优化</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color5">ajax</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color1">html5</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color5">css3</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color4">es6</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color4">es7</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color4">es8</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color5">代码分析</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color5">js基础</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color5">构建工具</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color1">混合app</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color5">混合开发</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color5">webSocket</a>
    </li>
    
    <div class="clearfix"></div>
</div>

    
    <nav id="title-list-nav">
        
        <a  class="web后端 "
           href="/2020/03/24/server/nodejs/"
           data-tag=""
           data-author="" >
            <span class="post-title" title="nodejs">nodejs</span>
            <span class="post-date" title="2020-03-24 15:40:21">2020/03/24</span>
        </a>
        
        <a  class="web前端 前端面试题 "
           href="/2020/03/24/client/angular/"
           data-tag="angular"
           data-author="" >
            <span class="post-title" title="angular">angular</span>
            <span class="post-date" title="2020-03-24 11:56:09">2020/03/24</span>
        </a>
        
        <a  class="web前端 前端面试题 "
           href="/2020/03/24/client/javascript/"
           data-tag="javascript"
           data-author="" >
            <span class="post-title" title="javascript基础">javascript基础</span>
            <span class="post-date" title="2020-03-24 11:43:12">2020/03/24</span>
        </a>
        
        <a  class="web前端 前端面试题 "
           href="/2020/03/24/client/jquery/"
           data-tag="jquery"
           data-author="" >
            <span class="post-title" title="jquery">jquery</span>
            <span class="post-date" title="2020-03-24 11:44:09">2020/03/24</span>
        </a>
        
        <a  class="web前端 前端面试题 "
           href="/2020/03/24/client/minapp/"
           data-tag="minapp"
           data-author="" >
            <span class="post-title" title="微信小程序">微信小程序</span>
            <span class="post-date" title="2020-03-24 11:00:34">2020/03/24</span>
        </a>
        
        <a  class="web前端 前端面试题 "
           href="/2020/03/24/client/react/"
           data-tag="react"
           data-author="" >
            <span class="post-title" title="react">react</span>
            <span class="post-date" title="2020-03-24 10:58:53">2020/03/24</span>
        </a>
        
        <a  class="web前端 前端面试题 "
           href="/2020/03/24/client/vue/"
           data-tag="vue"
           data-author="" >
            <span class="post-title" title="vue">vue</span>
            <span class="post-date" title="2020-03-24 10:59:46">2020/03/24</span>
        </a>
        
        <a  class="web前端 前端面试题 "
           href="/2020/03/24/client/websocket/"
           data-tag="webSocket"
           data-author="" >
            <span class="post-title" title="webSocket">webSocket</span>
            <span class="post-date" title="2020-03-24 13:17:01">2020/03/24</span>
        </a>
        
        <a  class="web前端 前端面试题 "
           href="/2020/03/24/client/web-base/"
           data-tag="前端基础"
           data-author="" >
            <span class="post-title" title="web前端基础">web前端基础</span>
            <span class="post-date" title="2020-03-24 10:59:46">2020/03/24</span>
        </a>
        
        <a  class="web后端 "
           href="/2020/03/24/server/php/"
           data-tag=""
           data-author="" >
            <span class="post-title" title="php">php</span>
            <span class="post-date" title="2020-03-24 15:42:33">2020/03/24</span>
        </a>
        
        <a  class="web服务器 "
           href="/2020/03/24/server/nginx/"
           data-tag="nginx"
           data-author="" >
            <span class="post-title" title="nginx">nginx</span>
            <span class="post-date" title="2020-03-24 15:43:15">2020/03/24</span>
        </a>
        
        <a  class="web服务器 "
           href="/2020/03/24/server/apache/"
           data-tag="apache"
           data-author="" >
            <span class="post-title" title="apache">apache</span>
            <span class="post-date" title="2020-03-24 15:43:29">2020/03/24</span>
        </a>
        
        <a  class="数据库 "
           href="/2020/03/24/server/mysql/"
           data-tag="mysql"
           data-author="" >
            <span class="post-title" title="mysql">mysql</span>
            <span class="post-date" title="2020-03-24 15:46:19">2020/03/24</span>
        </a>
        
        <a  class="数据库 "
           href="/2020/03/24/server/mongodb/"
           data-tag="mongodb"
           data-author="" >
            <span class="post-title" title="mongodb">mongodb</span>
            <span class="post-date" title="2020-03-24 15:46:36">2020/03/24</span>
        </a>
        
        <a  class="web前端 前端面试题 "
           href="/2020/03/25/client/webapi/"
           data-tag="webapi"
           data-author="" >
            <span class="post-title" title="webapi">webapi</span>
            <span class="post-date" title="2020-03-25 14:41:05">2020/03/25</span>
        </a>
        
        <a  class="web前端 前端面试题 "
           href="/2020/03/25/client/optimize/"
           data-tag="性能优化"
           data-author="" >
            <span class="post-title" title="前端性能优化">前端性能优化</span>
            <span class="post-date" title="2020-03-25 15:35:20">2020/03/25</span>
        </a>
        
        <a  class="web前端 前端面试题 "
           href="/2020/03/25/client/ajax/"
           data-tag="ajax"
           data-author="" >
            <span class="post-title" title="ajax数据交互">ajax数据交互</span>
            <span class="post-date" title="2020-03-25 15:40:58">2020/03/25</span>
        </a>
        
        <a  class="web前端 前端面试题 "
           href="/2020/03/25/client/h5c3/"
           data-tag="html5,css3"
           data-author="" >
            <span class="post-title" title="h5c3新特性">h5c3新特性</span>
            <span class="post-date" title="2020-03-25 15:50:04">2020/03/25</span>
        </a>
        
        <a  class="web前端 前端面试题 "
           href="/2020/03/25/client/es678/"
           data-tag="es6,es7,es8"
           data-author="" >
            <span class="post-title" title="ES6/7/8">ES6/7/8</span>
            <span class="post-date" title="2020-03-25 15:57:17">2020/03/25</span>
        </a>
        
        <a  class="web前端 前端面试题 "
           href="/2020/03/25/client/analysis/"
           data-tag="代码分析,js基础"
           data-author="" >
            <span class="post-title" title="js代码分析">js代码分析</span>
            <span class="post-date" title="2020-03-25 16:22:27">2020/03/25</span>
        </a>
        
        <a  class="web前端 前端面试题 "
           href="/2020/03/25/client/devtools/"
           data-tag="构建工具"
           data-author="" >
            <span class="post-title" title="前端构建工具">前端构建工具</span>
            <span class="post-date" title="2020-03-25 16:39:16">2020/03/25</span>
        </a>
        
        <a  class="web前端 前端面试题 "
           href="/2020/03/25/client/hybird/"
           data-tag="混合app,混合开发"
           data-author="" >
            <span class="post-title" title="混合开发">混合开发</span>
            <span class="post-date" title="2020-03-25 16:57:29">2020/03/25</span>
        </a>
        
    </nav>
</div>
    </div>
    <div class="hide-list">
        <div class="semicircle">
            <div class="brackets first"><</div>
            <div class="brackets">&gt;</div>
        </div>
    </div>
</aside>
<div class="post">
    <div class="pjax">
        <article id="post-client/vue" class="article article-type-post" itemscope itemprop="blogPost">
    
        <h1 class="article-title">vue</h1>
    
    <div class="article-meta">
        
        
        
        <span class="book">
            
                <a  data-rel="web前端">web前端</a>/
            
                <a  data-rel="前端面试题">前端面试题</a>
            
        </span>
        
        
        <span class="tag">
            
            <a class="color4">vue</a>
            
        </span>
        
    </div>
    <div class="article-meta">
        
        创建时间:<time class="date" title='更新时间: 2020-03-30 14:38:54'>2020-03-24 10:59</time>
        
    </div>
    <div class="article-meta">
        
        
        <span id="busuanzi_container_page_pv">
            阅读:<span id="busuanzi_value_page_pv">
                <span class="count-comment">
                    <span class="spinner">
                      <div class="cube1"></div>
                      <div class="cube2"></div>
                    </span>
                </span>
            </span>
        </span>
        
        
        <span class="top-comment" title="跳转至评论区">
            <a href="#comments">
                评论:<span class="count-comment">
                    <span class="spinner">
                      <div class="cube1"></div>
                      <div class="cube2"></div>
                    </span>
                </span>
            </a>
        </span>
        
    </div>
    
    <div class="toc-ref">
    
        <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#vue中如何封装一个组件"><span class="toc-text">vue中如何封装一个组件</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Vue中computed和watch的区别"><span class="toc-text">Vue中computed和watch的区别?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#谈谈对vue中插槽的理解"><span class="toc-text">谈谈对vue中插槽的理解?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#v-show-和-v-if在隐藏一个元素的时候有什么不同-应该如何来选择"><span class="toc-text">v-show 和 v-if在隐藏一个元素的时候有什么不同, 应该如何来选择?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#什么是Vuex-在那种场景下使用"><span class="toc-text">什么是Vuex, 在那种场景下使用?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#说说Vue路由的使用步骤"><span class="toc-text">说说Vue路由的使用步骤?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#你所了解到的常见Vue组件库有哪些"><span class="toc-text">你所了解到的常见Vue组件库有哪些?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#谈谈对于MVVM的理解"><span class="toc-text">谈谈对于MVVM的理解?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Vue的生命周期"><span class="toc-text">Vue的生命周期?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Vue实现数据双向绑定的原理"><span class="toc-text">Vue实现数据双向绑定的原理?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#发布者订阅者模式的理解"><span class="toc-text">发布者订阅者模式的理解</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#发布者订阅者的简单应用"><span class="toc-text">发布者订阅者的简单应用</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Vue创建组件的时候-data为什么要使用匿名函数return一个对象"><span class="toc-text">Vue创建组件的时候, data为什么要使用匿名函数return一个对象?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Vue中实现父组件向子组件传递数据"><span class="toc-text">Vue中实现父组件向子组件传递数据?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Vue中如何实现子组件向父组件传递数据"><span class="toc-text">Vue中如何实现子组件向父组件传递数据?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Vue中实现兄弟组件间的传递数据"><span class="toc-text">Vue中实现兄弟组件间的传递数据?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Vue中有几种路由模式"><span class="toc-text">Vue中有几种路由模式?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Vue路由导航守卫是什么-以及应用场景"><span class="toc-text">Vue路由导航守卫是什么, 以及应用场景</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Vue如何自定义一个过滤器？"><span class="toc-text">Vue如何自定义一个过滤器？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Vue如何自定义一个vue指令？"><span class="toc-text">Vue如何自定义一个vue指令？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#怎么定义-vue-router-的动态路由-怎么获取通过路由传过来的参数"><span class="toc-text">怎么定义 vue-router 的动态路由? 怎么获取通过路由传过来的参数?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Vue路由模块中-route和-router的区别"><span class="toc-text">Vue路由模块中$route和$router的区别?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#vue中v-for指令循环遍历中key属性的作用？"><span class="toc-text">vue中v-for指令循环遍历中key属性的作用？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Vue和react有哪些不同的地方"><span class="toc-text">Vue和react有哪些不同的地方?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Vue有哪些常用的事件修饰符"><span class="toc-text">Vue有哪些常用的事件修饰符?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#列举Vue中常用的指令"><span class="toc-text">列举Vue中常用的指令</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Vue中如何解决插值表达式闪烁问题"><span class="toc-text">Vue中如何解决插值表达式闪烁问题?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Vue路由中如何实现通过锚点值的改变切换组件"><span class="toc-text">Vue路由中如何实现通过锚点值的改变切换组件?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#vue中如何实现给样式添加作用域-说明其实现原理"><span class="toc-text">vue中如何实现给样式添加作用域? 说明其实现原理</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Vue中如何动态添加一个路由规则"><span class="toc-text">Vue中如何动态添加一个路由规则?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Vue中有何优化页面的加载效率"><span class="toc-text">Vue中有何优化页面的加载效率?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#什么是路由懒加载-路由懒加载有什么好处-如何实现路由懒加载"><span class="toc-text">什么是路由懒加载? 路由懒加载有什么好处? 如何实现路由懒加载?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Vue中如何触发一个自定义事件"><span class="toc-text">Vue中如何触发一个自定义事件?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Vue中如何监听自定义事件的执行"><span class="toc-text">Vue中如何监听自定义事件的执行?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Vue中如何移除自定义事件"><span class="toc-text">Vue中如何移除自定义事件?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#vm-mount-selector-方法的作用是什么"><span class="toc-text">vm.$mount(selector)方法的作用是什么?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Vue中keep-alive组件的作用是什么"><span class="toc-text">Vue中keep-alive组件的作用是什么?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Vue中如何手动销毁一个vue实例"><span class="toc-text">Vue中如何手动销毁一个vue实例?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Vue中有哪些内置的组件"><span class="toc-text">Vue中有哪些内置的组件?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#vue实例中有哪些属性"><span class="toc-text">vue实例中有哪些属性?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Vue-use-plugin-的作用是什么-使用的时候需要注意什么问题"><span class="toc-text">Vue.use(plugin)的作用是什么, 使用的时候需要注意什么问题?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#vm-nextTick-fn-的作用是什么"><span class="toc-text">vm.$nextTick(fn)的作用是什么?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#vue中的混入-mixin-有什么作用"><span class="toc-text">vue中的混入(mixin)有什么作用?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#如何开发一个vue插件"><span class="toc-text">如何开发一个vue插件?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#什么是ssr-如何实现ssr"><span class="toc-text">什么是ssr? 如何实现ssr?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#什么是SPA"><span class="toc-text">什么是SPA?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#使用vue-react-angular开发的SPA单页面应用有什么优缺点"><span class="toc-text">使用vue, react, angular开发的SPA单页面应用有什么优缺点?</span></a></li></ol>
    
<style>
    .left-col .switch-btn,
    .left-col .switch-area {
        display: none;
    }
    .toc-level-3 i,
    .toc-level-3 ol {
        display: none !important;
    }
</style>
</div>
    
    <div class="article-entry" itemprop="articleBody">
      
        <h2 id="vue中如何封装一个组件"><a href="#vue中如何封装一个组件" class="headerlink" title="vue中如何封装一个组件"></a>vue中如何封装一个组件</h2><p>首先定义一个后缀名为.vue的文件. 文件内部还是三部分组成, <code>template</code> 模板部分, script逻辑部分, style样式部分. 这三部分是组件的核心部分, 组件需要哪些结构, 在模板部分书写, 需要什么样的外观样式, 通过style部分书写, 有哪些行为在script部分书写. 一定要在script部分使用es6模块化的导出语法(<code>export default{}</code>), 进行导出. 然后在需要调用组件的地方使用es6模块化导入语法导入即可, 组件需要哪些参数, 直接在调用的部分进行传递即可. 主要逻辑还是在组件中完成.</p>
<h2 id="Vue中computed和watch的区别"><a href="#Vue中computed和watch的区别" class="headerlink" title="Vue中computed和watch的区别?"></a>Vue中computed和watch的区别?</h2><p>computed是计算属性, 可以根据data中的数据成员, 动态计算出一个新的数据成员(这个数据成员在data中并不存在), 计算属性的函数必须有返回值; watch是监视器, 可以监视data中某一个数据成员的改变或路由中的某些属性的改变, 可以根据这个改变, 做一些其他操作(不仅仅局限于更新其他相关数据).<br>Watch监听器:</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-keyword">var</span> vm = <span class="hljs-keyword">new</span> Vue(&#123;<br>    el: <span class="hljs-string">'#demo'</span>,<br>    data: &#123;<br>        firstName: <span class="hljs-string">'Foo'</span>,<br>        lastName: <span class="hljs-string">'Bar'</span>,<br>        fullName: <span class="hljs-string">'Foo Bar'</span><br>    &#125;,<br>    watch: &#123;<br>        firstName: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">val</span>) </span>&#123;<br>            <span class="hljs-keyword">this</span>.fullName = val + <span class="hljs-string">' '</span> + <span class="hljs-keyword">this</span>.lastName<br>        &#125;,<br>        lastName: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">val</span>) </span>&#123;<br>            <span class="hljs-keyword">this</span>.fullName = <span class="hljs-keyword">this</span>.firstName + <span class="hljs-string">' '</span> + val<br>        &#125;<br>    &#125;<br>&#125;)<br></code></pre></td></tr></table></figure>

<p>计算属性:</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-keyword">var</span> vm = <span class="hljs-keyword">new</span> Vue(&#123;<br>    el: <span class="hljs-string">'#demo'</span>,<br>    data: &#123;<br>        firstName: <span class="hljs-string">'Foo'</span>,<br>        lastName: <span class="hljs-string">'Bar'</span><br>    &#125;,<br>    computed: &#123;<br>        fullName: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>&#123;<br>            <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.firstName + <span class="hljs-string">' '</span> + <span class="hljs-keyword">this</span>.lastName<br>        &#125;<br>    &#125;<br>&#125;)<br></code></pre></td></tr></table></figure>

<h2 id="谈谈对vue中插槽的理解"><a href="#谈谈对vue中插槽的理解" class="headerlink" title="谈谈对vue中插槽的理解?"></a>谈谈对vue中插槽的理解?</h2><p>Vue中的插槽分为三种, 匿名插槽, 具名插槽, 作用域插槽.<br>通过插槽可以动态指定某一个组件模板部分的渲染, 我们在调用组件的时候, 在组件的调用标签中间传递了什么样的标签结构, 那么该组件就会把我们传递的标签结构放在他的模板部分进行渲染.</p>
<h2 id="v-show-和-v-if在隐藏一个元素的时候有什么不同-应该如何来选择"><a href="#v-show-和-v-if在隐藏一个元素的时候有什么不同-应该如何来选择" class="headerlink" title="v-show 和 v-if在隐藏一个元素的时候有什么不同, 应该如何来选择?"></a>v-show 和 v-if在隐藏一个元素的时候有什么不同, 应该如何来选择?</h2><p>v-show是通过css的方式来隐藏元素, 而v-if是根据条件是否成立决定是否要创建元素. 如果某个元素需要频繁切换显示状态的话, 建议是使用v-show, 因为频繁创建销毁DOM需要性能开销.</p>
<h2 id="什么是Vuex-在那种场景下使用"><a href="#什么是Vuex-在那种场景下使用" class="headerlink" title="什么是Vuex, 在那种场景下使用?"></a>什么是Vuex, 在那种场景下使用?</h2><p>Vuex是针对vue的一个状态管理工具. 有几个核心的部分:<br>state存储状态数据;<br>mutations: 更新数据的方法,<br>actions: 调用mutations中的方法, 更新state数据;<br>getters: 对state中的数据进行预处理<br>当组件的关系比较复杂的时候, 可以使用vuex简化组件间的传值.</p>
<h2 id="说说Vue路由的使用步骤"><a href="#说说Vue路由的使用步骤" class="headerlink" title="说说Vue路由的使用步骤?"></a>说说Vue路由的使用步骤?</h2><p>第一步: 下载路由模块<code>vue-router</code>;<br>第二步: 创建路由对象;<br>第三步: 配置路由规则;<br>第四步: 将路由对象注册为vue实例对象的成员属性</p>
<h2 id="你所了解到的常见Vue组件库有哪些"><a href="#你所了解到的常见Vue组件库有哪些" class="headerlink" title="你所了解到的常见Vue组件库有哪些?"></a>你所了解到的常见Vue组件库有哪些?</h2><p>PC端组件库: <code>element-ui, ant-design, iview</code><br>移动端: <code>mint-ui, vant, vux</code></p>
<h2 id="谈谈对于MVVM的理解"><a href="#谈谈对于MVVM的理解" class="headerlink" title="谈谈对于MVVM的理解?"></a>谈谈对于MVVM的理解?</h2><p>MVVM由三部分组成<code>M(model数据层)</code>,<code>V(view视图层)</code>, <code>VM(view-model)</code>视图模型层. 是一种框架的设计思想, vue就是基于mvvm来设计的.<br>其中<code>M(model)</code>层是负责初始化数据, <code>V(view)</code>只负责页面展示, <code>VM(view-model)</code>用来连接<code>view</code>层和<code>model</code>层, 将数据层的数据传递一个视图层进行展示, 将视图层的操作传递到数据层进行持久化.</p>
<h2 id="Vue的生命周期"><a href="#Vue的生命周期" class="headerlink" title="Vue的生命周期?"></a>Vue的生命周期?</h2><p>创建阶段: 只执行一次<br><code>beforeCreate</code>(开始进行一些数据和方法的初始化的操作, data中的数据和methods中的方法还不能用),<br> <code>created</code>(已经完成数据和方法的初始化, data中的数据和methods中的方法可以使用了),<br> <code>beforeMount</code>(开始渲染虚拟DOM),<br><code>mounted</code>(已经完成了虚拟DOM 的渲染, 可以操作DOM 了, 只执行一次)<br>运行阶段: 执行多次<br><code>beforeUpdate</code>(data中的数据即将被更新, 会执行多次)<br><code>updated</code>(data中的数据已经更新完毕, 会执行多次)<br>销毁阶段: 只执行一次<br><code>beforeDestroy</code>(vue实例即将销毁, 此时data中的数据和methods中的方法依然处于可用状态)<br><code>destroyed</code>(vue实例已经销毁, 此时data中的数据和methods中的方法已经不可用)</p>
<h2 id="Vue实现数据双向绑定的原理"><a href="#Vue实现数据双向绑定的原理" class="headerlink" title="Vue实现数据双向绑定的原理?"></a>Vue实现数据双向绑定的原理?</h2><p>Vue是使用数据劫持, 结合发布者订阅者模式实现双向数据绑定的</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-comment">/* 初始值*/</span><br><span class="hljs-keyword">var</span> data = &#123;<br>    msg: <span class="hljs-string">'hello'</span>,<br>    title: <span class="hljs-string">'标题'</span><br>&#125;<br><span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> key <span class="hljs-keyword">in</span> data) &#123;<br>    <span class="hljs-built_in">Object</span>.defineProperty(<span class="hljs-built_in">window</span>, key, &#123;<br>        <span class="hljs-keyword">get</span>: function() &#123;<br>            <span class="hljs-comment">/* console.log('get被触发了');*/</span><br>            <span class="hljs-keyword">return</span> data[key];<br>        &#125;,<br>        <span class="hljs-keyword">set</span>: function(input) &#123;<br>            <span class="hljs-comment">/* do something: 如通知界面层更新 */</span><br>            <span class="hljs-built_in">console</span>.log(input, <span class="hljs-string">'假装在通知界面'</span>);<br>        &#125;<br>    &#125;);<br>&#125;<br>title = <span class="hljs-string">'title初始值'</span>;<br><span class="hljs-built_in">console</span>.log(title);<br></code></pre></td></tr></table></figure>

<p>执行过程分析:<br>读取title或者msg的时候get方法会自动触发; 重新给title或msg赋值的时候, set方法会被自动触发(可以在此处通知界面层更新)</p>
<h2 id="发布者订阅者模式的理解"><a href="#发布者订阅者模式的理解" class="headerlink" title="发布者订阅者模式的理解"></a>发布者订阅者模式的理解</h2><blockquote>
<p>发布者订阅者模式又称为观察者模式. 需要对外提供两个核心的方法, 一定是订阅方法, 一个是发布方法. 订阅方法的职责是收集话题订阅者对象, 将这些对象维护在一个对象里. 订阅方法需要接受两个参数, 一个是话题, 另一个是回调函数. 发布方法需要接受两个参数, 一个是话题, 另一个是额外数据. 发布方法主要任务是查找到对应话题的订阅者对象, 依次去触发该订阅者所提供的的回调函数. </p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-keyword">var</span> pubsub = (<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>&#123;<br>    <span class="hljs-comment">/*</span><br><span class="hljs-comment">        topics为存放订阅者的对象, 结构如下:</span><br><span class="hljs-comment">        topics=&#123;</span><br><span class="hljs-comment">            'msg':[</span><br><span class="hljs-comment">                &#123;token:1,func:function(topic,args)&#123;   &#125;&#125;,</span><br><span class="hljs-comment">                &#123;token:2,func:function(topic,args)&#123;   &#125;&#125;</span><br><span class="hljs-comment">                ],</span><br><span class="hljs-comment">             'msg2':[</span><br><span class="hljs-comment">                &#123;token:3,func:function(topic,args)&#123;   &#125;&#125;</span><br><span class="hljs-comment">                ]   </span><br><span class="hljs-comment">            &#125;</span><br><span class="hljs-comment">    */</span><br>    <span class="hljs-keyword">var</span> q = &#123;&#125;<br>        topics = &#123;&#125;,    <span class="hljs-comment">/* 维护订阅者的对象  */</span><br>        subUid = <span class="hljs-number">-1</span>;    <span class="hljs-comment">/*  订阅者的唯一标识, 采用连续的数值 */</span> <br><br>    <span class="hljs-comment">/*</span><br><span class="hljs-comment">        发布消息: 通过话题, 查找到对应的订阅对象, 依次触发订阅者提供的回调函数</span><br><span class="hljs-comment">    */</span><br>    q.publish = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">topic, args</span>) </span>&#123;<br>        <span class="hljs-comment">/* 判断有没有当前的话题 */</span><br>        <span class="hljs-keyword">if</span>(!topics[topic]) &#123;<span class="hljs-keyword">return</span>;&#125;<br>        <span class="hljs-comment">/* 当前话题订阅者数组 */</span><br>        <span class="hljs-keyword">var</span> subs = topics[topic],<br>            len = subs.length;<br>        <span class="hljs-comment">/* 通过循环触发话题订阅者提供的回调函数 */</span><br>        <span class="hljs-keyword">while</span>(len--) &#123;<br>            subs[len].func(topic, args);<br>        &#125;<br>        <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>;<br>    &#125;;<br>    <span class="hljs-comment">/*</span><br><span class="hljs-comment">    订阅方法: 收集订阅对象, 一个消息可以被多次订阅</span><br><span class="hljs-comment">    接收两个参数, 要订阅的话题topic，处理程序func, 然后将其组装成对象的格式&#123;topic:'',func:function()&#123;&#125;&#125;, 存放到事先准备好的topics对象中 </span><br><span class="hljs-comment">    */</span><br>    q.subscribe = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">topic, func</span>) </span>&#123;<br>        <span class="hljs-comment">/* 如果当前话题已经有订阅者，获取到订阅者数组 */</span><br>        <span class="hljs-comment">/* 一个话题名下的 订阅者事件可以是多个fn1, fn2, fn3 */</span><br>        topics[topic] = topics[topic] ? topics[topic] : [];<br>        <br>        <span class="hljs-comment">/* 给每个订阅者添加唯一的token: 目的是为了取消订阅 */</span><br>        <span class="hljs-keyword">var</span> token = (++subUid).toString();<br>        topics[topic].push(&#123;<br>            token : token,<br>            func : func<br>        &#125;);<br>        <span class="hljs-keyword">return</span> token;<br>    &#125;;<br>    <span class="hljs-comment">/* 取消订阅 */</span><br>    q.unsubscribe = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">token</span>)</span>&#123;<br>        <span class="hljs-built_in">Object</span>.keys(topics).map( <span class="hljs-function"><span class="hljs-params">key</span> =&gt;</span> &#123;<br>            topics[key].map(<span class="hljs-function">(<span class="hljs-params">fn, fnIndex</span>) =&gt;</span> &#123;<br>                <span class="hljs-keyword">if</span>(fn.token == token)&#123;<br>                    topics[key].splice(fnIndex,<span class="hljs-number">1</span>)<br>                &#125;<br>            &#125;)<br>        &#125;)<br>    &#125;<br>    <span class="hljs-keyword">return</span> q;<br>&#125;)();<br></code></pre></td></tr></table></figure>

<h2 id="发布者订阅者的简单应用"><a href="#发布者订阅者的简单应用" class="headerlink" title="发布者订阅者的简单应用"></a>发布者订阅者的简单应用</h2><blockquote>
<p>使用订阅者发布者实现vue组件之间的传值, 此处使用的是上面自定义的订阅者发布者</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app"</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>&#123;&#123;title&#125;&#125;<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">h3</span>&gt;</span>&#123;&#123;msgFromSon&#125;&#125;<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">hr</span>/&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">son</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">son</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br></code></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-keyword">var</span> vm = <span class="hljs-keyword">new</span> Vue(&#123;<br>        el: <span class="hljs-string">'#app'</span>,<br>        data: &#123;<br>            title: <span class="hljs-string">'vue组件传值-通过发布者订阅者'</span>,<br>            msgFromSon:<span class="hljs-string">''</span><br>        &#125;,<br>        created()&#123;<br>            <span class="hljs-comment">/* 在父组件中订阅消息msg */</span><br>            pubsub.subscribe(<span class="hljs-string">'msg'</span>,(topic,args)=&gt;&#123;<br>                <span class="hljs-keyword">this</span>.msgFromSon=args;<br>                <span class="hljs-built_in">console</span>.log(<span class="hljs-string">`来自子组件的消息:<span class="hljs-subst">$&#123;args&#125;</span>`</span>);<br>            &#125;);<br>        &#125;,<br>        components: &#123;<br>            son: &#123;<br>                data()&#123;<br>                    <span class="hljs-keyword">return</span> &#123;<br>                        title:<span class="hljs-string">'子组件son'</span>,<br>                        msg:<span class="hljs-string">'a msg will send to parant'</span><br>                    &#125;<br>                &#125;,<br>                template: <span class="hljs-string">`</span><br><span class="hljs-string">                &lt;div&gt;</span><br><span class="hljs-string">                    &lt;h1&gt;&#123;&#123;title&#125;&#125;&lt;/h1&gt;</span><br><span class="hljs-string">                    &lt;input v-model="msg" /&gt;</span><br><span class="hljs-string">                    &lt;button @click="sendMsg"&gt;send&lt;/button&gt;</span><br><span class="hljs-string">                &lt;/div&gt;</span><br><span class="hljs-string">                `</span>,<br>                methods:&#123;<br>                    sendMsg()&#123;<br>                        <span class="hljs-comment">/* 在子组件中发布消息 */</span><br>                        pubsub.publish(<span class="hljs-string">'msg'</span>,<span class="hljs-keyword">this</span>.msg);<br>                    &#125;<br>                &#125;<br>            &#125;<br>        &#125;<br>    &#125;);<br></code></pre></td></tr></table></figure>

<h2 id="Vue创建组件的时候-data为什么要使用匿名函数return一个对象"><a href="#Vue创建组件的时候-data为什么要使用匿名函数return一个对象" class="headerlink" title="Vue创建组件的时候, data为什么要使用匿名函数return一个对象?"></a>Vue创建组件的时候, data为什么要使用匿名函数return一个对象?</h2><p>因为对象是一种引用数据类型, 在内存中只有一份. 如果data的值直接是一个对象的话, 那么后期组件在不同的地方多次调用的时候, 会相互产生影响, 因为每一次调用操作的data对象是一样的. 使用函数的方式返回对象, 可以保证组件的每一次调用都会创建一个新对象, 这样组件的每一次调用不会相互产生影响.</p>
<h2 id="Vue中实现父组件向子组件传递数据"><a href="#Vue中实现父组件向子组件传递数据" class="headerlink" title="Vue中实现父组件向子组件传递数据?"></a>Vue中实现父组件向子组件传递数据?</h2><p>第一步: 在子组件的调用标签上声明一个自定义属性, 属性值来自父组件的data<br>第二步: 在子组件的定义部分声明一个属性props, 值是一个数组, 将自定义属性的名字在props中进行声明; 在子组件的模板部分可以使用props中声明过的数据.</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-comment">/*父组件*/</span><br>Vue.component(<span class="hljs-string">'parent'</span>, &#123;<br>    template: <span class="hljs-string">`</span><br><span class="hljs-string">        &lt;div&gt; </span><br><span class="hljs-string">        &lt;child :msgFromParent="msg"&gt;&lt;/child&gt; </span><br><span class="hljs-string">        &lt;div&gt;`</span>,<br>    data: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>&#123;<br>        <span class="hljs-keyword">return</span> &#123;<br>            title: <span class="hljs-string">'父组件的标题'</span>,<br>            msg: <span class="hljs-string">'这是传给子组件的值'</span><br>        &#125;<br>    &#125;<br>    <span class="hljs-comment">/* 子组件*/</span><br><br>    components: &#123;<br>        child: &#123;<br>            <span class="hljs-comment">/* 模板*/</span><br>            template: <span class="hljs-string">`</span><br><span class="hljs-string">            &lt;div&gt;</span><br><span class="hljs-string">            &lt;h1&gt;&#123;&#123;msgFromParent&#125;&#125;&lt;/h1&gt; </span><br><span class="hljs-string">            &lt;/div&gt;`</span>,<br>            <span class="hljs-comment">/* 数据模型*/</span><br>            data: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>&#123;<br>                <span class="hljs-keyword">return</span> &#123;<br>                    title: <span class="hljs-string">'子组件标题'</span><br>                &#125;<br>            &#125;,<br>            <span class="hljs-comment">/*获取父组件中传过来的值*/</span><br>            props: [<span class="hljs-string">'msgFromParent'</span>]<br>        &#125;<br>    &#125;<br>&#125;);<br></code></pre></td></tr></table></figure>

<h2 id="Vue中如何实现子组件向父组件传递数据"><a href="#Vue中如何实现子组件向父组件传递数据" class="headerlink" title="Vue中如何实现子组件向父组件传递数据?"></a>Vue中如何实现子组件向父组件传递数据?</h2><p>第一步: 在子组件的调用标签只上通过<code>v-on</code>动态绑定一个自定义事件, 自定义事件的处理函数必须在父组件的<code>methods</code>中提前声明, 这个函数需要一个形参, 来接收子组件传递过来的数据.<br>第二步: 在子组件中通过<code>this.$emit(自定义事件, 数据)</code>触发自定义事件的执行, 此动作可以放在子组件的<code>created/mounted</code>生命周期中, 可以放在某个事件处理函数中.</p>
<h2 id="Vue中实现兄弟组件间的传递数据"><a href="#Vue中实现兄弟组件间的传递数据" class="headerlink" title="Vue中实现兄弟组件间的传递数据?"></a>Vue中实现兄弟组件间的传递数据?</h2><p>第一步: 声明一个空的Vue实例对象<code>comm</code>, 作为事件中心的角色<br>第二步: 在<code>acom</code>组件中通过<code>comm.$emit(自定义事件, 数据)</code>的方式触发事件(此操作可放在某个事件处理函数或者<code>acom</code>组件的生命周期函数<code>created/mounted</code>中)<br>第三步: 在<code>bcom</code>组件中通过<code>comm.$on(自定义事件, function(data){})</code>监听自定义事件的执行(操作可放在<code>bcom</code>组件的声明周期函数<code>created/mounted</code>中)</p>
<p>/* 公共组件<em>/<br><code>var comm=new Vue();</code><br>/</em> 兄弟组件1*/</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><code class="hljs js">Vue.component(<span class="hljs-string">'coma'</span>, &#123;<br>    template: <span class="hljs-string">`</span><br><span class="hljs-string">        &lt;div&gt;</span><br><span class="hljs-string">        &lt;h1&gt;&#123;&#123;title&#125;&#125;&lt;/h1&gt;</span><br><span class="hljs-string">        &lt;button @click="sendMsg"&gt;发送&lt;/button&gt;</span><br><span class="hljs-string">        &lt;/div&gt;</span><br><span class="hljs-string">    `</span>,<br>    data: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>&#123;<br>        <span class="hljs-keyword">return</span> &#123;<br>            title: <span class="hljs-string">'组件A'</span>,<br>            msg: <span class="hljs-string">'传给兄弟组件的值'</span><br>        &#125;<br>    &#125;,<br>    methods: &#123;<br>        sendMsg: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>&#123;<br>            comm.$emit(<span class="hljs-string">'myevent'</span>, <span class="hljs-keyword">this</span>.msg)<br>        &#125;<br>    &#125;,<br>    created: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>&#123;<br>        <span class="hljs-comment">/* 注册自定义事件*/</span><br>        comm.$emit(<span class="hljs-string">'myevent'</span>, <span class="hljs-keyword">this</span>.msg);<br>        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'注册事件OK'</span>);<br>    &#125;<br>&#125;);<br></code></pre></td></tr></table></figure>

<p>/* 兄弟组件2*/</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><code class="hljs js">Vue.component(<span class="hljs-string">'comb'</span>, &#123;<br>    template: <span class="hljs-string">`</span><br><span class="hljs-string">        &lt;div&gt;</span><br><span class="hljs-string">        &lt;h1&gt;&#123;&#123;title&#125;&#125;&lt;/h1&gt;</span><br><span class="hljs-string">        &lt;h1&gt;&#123;&#123;msg&#125;&#125;&lt;/h1&gt;</span><br><span class="hljs-string">        &lt;/div&gt;</span><br><span class="hljs-string">    `</span>,<br>    data: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>&#123;<br>        <span class="hljs-keyword">return</span> &#123;<br>            title: <span class="hljs-string">'组件B'</span>,<br>            msg: <span class="hljs-string">''</span><br>        &#125;<br>    &#125;,<br>    mounted: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>&#123;<br>        comm.$on(<span class="hljs-string">'myevent'</span>, (data) =&gt; &#123;<br>            <span class="hljs-keyword">this</span>.msg = data<br>            <span class="hljs-built_in">console</span>.log(data);<br>        &#125;);<br>    &#125;<br>&#125;);<br></code></pre></td></tr></table></figure>

<h2 id="Vue中有几种路由模式"><a href="#Vue中有几种路由模式" class="headerlink" title="Vue中有几种路由模式?"></a>Vue中有几种路由模式?</h2><p>Vue中的路由模式有两种:<code>hash</code>, <code>history</code>; 默认是<code>hash</code>模式; 可以在创建路由对象的时候, 使用<code>mode</code>属性来切换路由模式.<br><code>const router=new Router({mode:&#39;history&#39;})</code></p>
<h2 id="Vue路由导航守卫是什么-以及应用场景"><a href="#Vue路由导航守卫是什么-以及应用场景" class="headerlink" title="Vue路由导航守卫是什么, 以及应用场景"></a>Vue路由导航守卫是什么, 以及应用场景</h2><p>路由守卫是在页面进行路由跳转的时候做一些处理, 比如拦截.<br><code>vue-router</code>中提供了下面几种路由导航守卫:<br>全局前置守卫</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-keyword">const</span> router = <span class="hljs-keyword">new</span> VueRouter(&#123;<br>    ...<br>&#125;)<br><br>router.beforeEach(<span class="hljs-function">(<span class="hljs-params">to, <span class="hljs-keyword">from</span>, next</span>) =&gt;</span> &#123;<br>    <span class="hljs-comment">/* from从里来*/</span><br>    <span class="hljs-comment">/* to到哪里去*/</span><br>    <span class="hljs-comment">/* next是否要放行*/</span><br>&#125;)<br><br>全局后置钩子<br><br>router.afterEach(<span class="hljs-function">(<span class="hljs-params">to, <span class="hljs-keyword">from</span></span>) =&gt;</span> &#123;<br>    <span class="hljs-comment">/* ...*/</span><br>&#125;)<br></code></pre></td></tr></table></figure>

<p>路由独享守卫: 在声明路由的时候, 针对特定路由的钩子函数</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-keyword">const</span> router = <span class="hljs-keyword">new</span> VueRouter(&#123;<br>    routes: [&#123;<br>        path: <span class="hljs-string">'/foo'</span>,<br>        component: Foo,<br>        beforeEnter: <span class="hljs-function">(<span class="hljs-params">to, <span class="hljs-keyword">from</span>, next</span>) =&gt;</span> &#123;<br>            <span class="hljs-comment">/* ...*/</span><br>        &#125;<br>    &#125;]<br>&#125;)<br></code></pre></td></tr></table></figure>

<h2 id="Vue如何自定义一个过滤器？"><a href="#Vue如何自定义一个过滤器？" class="headerlink" title="Vue如何自定义一个过滤器？"></a>Vue如何自定义一个过滤器？</h2><p>定义全局过滤器:<br><code>Vue.filter(‘过虑器名称’,function(input){ return input });</code><br>定义局部过滤器:</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-keyword">new</span> Vue(&#123;<br>    filters: &#123;<br>        dateFmt: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">input</span>) </span>&#123;<br>            <span class="hljs-keyword">return</span> <span class="hljs-string">'yyyy-mm-dd'</span>;<br>        &#125;<br>    &#125;<br>&#125;)<br></code></pre></td></tr></table></figure>

<h2 id="Vue如何自定义一个vue指令？"><a href="#Vue如何自定义一个vue指令？" class="headerlink" title="Vue如何自定义一个vue指令？"></a>Vue如何自定义一个vue指令？</h2><p>定义全局指令:<br><code>Vue.directive(‘指令名’,function(el,binding){});</code><br>定义私有指令:</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-keyword">new</span> Vue(&#123;<br>    directives: &#123;<br>        focus: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">el, binding</span>) </span>&#123;&#125;<br>    &#125;<br>&#125;);<br></code></pre></td></tr></table></figure>

<h2 id="怎么定义-vue-router-的动态路由-怎么获取通过路由传过来的参数"><a href="#怎么定义-vue-router-的动态路由-怎么获取通过路由传过来的参数" class="headerlink" title="怎么定义 vue-router 的动态路由? 怎么获取通过路由传过来的参数?"></a>怎么定义 vue-router 的动态路由? 怎么获取通过路由传过来的参数?</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-keyword">const</span> router = <span class="hljs-keyword">new</span> VueRouter(&#123;<br>    routes: [&#123;<br>        path: <span class="hljs-string">'/product/:id'</span>,<br>        component: Product<br>    &#125;]<br>&#125;);<br><span class="hljs-comment">/* 获取参数:*/</span><br><span class="hljs-keyword">this</span>.$route.params.id<br></code></pre></td></tr></table></figure>

<h2 id="Vue路由模块中-route和-router的区别"><a href="#Vue路由模块中-route和-router的区别" class="headerlink" title="Vue路由模块中$route和$router的区别?"></a>Vue路由模块中$route和$router的区别?</h2><p><code>$route</code>中存储的是跟路由相关的属性(如<code>$route.params</code>, <code>$route.query</code>) ; <code>$router</code>中存储的是和路由相关的方法(如<code>$router.push(), $router.go()</code>), </p>
<h2 id="vue中v-for指令循环遍历中key属性的作用？"><a href="#vue中v-for指令循环遍历中key属性的作用？" class="headerlink" title="vue中v-for指令循环遍历中key属性的作用？"></a>vue中v-for指令循环遍历中key属性的作用？</h2><p>Key属性的作用是在数据层和视图层之间建立一一对应关系, 方便后期对页面进行局部更新. 如果某一条数据发生改变, 只更新当前数据对应的DOM元素.</p>
<h2 id="Vue和react有哪些不同的地方"><a href="#Vue和react有哪些不同的地方" class="headerlink" title="Vue和react有哪些不同的地方?"></a>Vue和react有哪些不同的地方?</h2><p>Vue实现了双向数据绑定(数据&lt;=&gt;界面); <code>react</code>仅仅实现了单项数据流(数据层=&gt;界面层); <code>vue</code>中提供了指令, <code>react</code>中没有指令的概念.<code>vue</code>中使用插值表达式在进行数据渲染, <code>react</code>中使用<code>jsx</code>进行数据的渲染.</p>
<h2 id="Vue有哪些常用的事件修饰符"><a href="#Vue有哪些常用的事件修饰符" class="headerlink" title="Vue有哪些常用的事件修饰符?"></a>Vue有哪些常用的事件修饰符?</h2><p><code>.prevent</code>: 阻止默认事件;<br><code>.stop</code>: 阻止冒泡;<br><code>.once</code>: 事件执行一次;<br><code>.self</code>: 只当在 <code>event.target</code> 是当前元素自身时触发处理函数</p>
<h2 id="列举Vue中常用的指令"><a href="#列举Vue中常用的指令" class="headerlink" title="列举Vue中常用的指令"></a>列举Vue中常用的指令</h2><p><code>v-model</code>: 实现双向数据绑定;<br><code>v-bind</code>: 绑定属性;<br><code>v-on</code>: 注册事件;<br><code>v-html</code>: 设置标签内容(允许内容html)<br><code>v-text</code>: 设置标签的内容(不允许包含html)<br><code>v-clack</code>: 解决插值表达式闪烁问题<br><code>V-for</code>: 循环遍历数组或对象</p>
<h2 id="Vue中如何解决插值表达式闪烁问题"><a href="#Vue中如何解决插值表达式闪烁问题" class="headerlink" title="Vue中如何解决插值表达式闪烁问题?"></a>Vue中如何解决插值表达式闪烁问题?</h2><p>使用<code>v-html</code>或<code>v-text</code>替代插值表达式;<br>使用<code>v-clack</code>解决插值表达式闪烁,<br>第一步: 声明属性选择器<code>[v-clack]{display:none}</code><br>第二步: 在插值表达式所在标签添加属性<code>v-clack</code></p>
<h2 id="Vue路由中如何实现通过锚点值的改变切换组件"><a href="#Vue路由中如何实现通过锚点值的改变切换组件" class="headerlink" title="Vue路由中如何实现通过锚点值的改变切换组件?"></a>Vue路由中如何实现通过锚点值的改变切换组件?</h2><p>通过监听<code>hashchange</code>事件, 具体如下:</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-built_in">window</span>.addEventListener(<span class="hljs-string">'hashchange'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>&#123;<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'hash change'</span>);<br>&#125;);<br></code></pre></td></tr></table></figure>



<h2 id="vue中如何实现给样式添加作用域-说明其实现原理"><a href="#vue中如何实现给样式添加作用域-说明其实现原理" class="headerlink" title="vue中如何实现给样式添加作用域? 说明其实现原理"></a>vue中如何实现给样式添加作用域? 说明其实现原理</h2><p>vue中要给样式添加作用域, 只需要给style标签添加scoped属性即可.<br>实现原理:<br>添加了<code>scoped</code>属性的<code>style</code>标签内的样式会被改写成一个交集选择器, 会在原来类名的基础上添加一个随机属性(如<code>.container[v-abcde]</code>), 同时引用该类名的标签也会添加一个相同的属性(如<code>&lt;div class=”container”  v-abcde&gt;&lt;/div&gt;</code>) , 这样的话, 这个类名就可以对引用它的标签生效, 同时不会影响其他同类名的标签.</p>
<h2 id="Vue中如何动态添加一个路由规则"><a href="#Vue中如何动态添加一个路由规则" class="headerlink" title="Vue中如何动态添加一个路由规则?"></a>Vue中如何动态添加一个路由规则?</h2><p>使用<code>router.addRoutes([{path:’’, component:’’}])</code></p>
<h2 id="Vue中有何优化页面的加载效率"><a href="#Vue中有何优化页面的加载效率" class="headerlink" title="Vue中有何优化页面的加载效率?"></a>Vue中有何优化页面的加载效率?</h2><p>使用路由懒加载和组件懒加载;<br>不要打包一些公共的依赖(vue, 组件库);<br>使用CDN加载这些依赖文件</p>
<h2 id="什么是路由懒加载-路由懒加载有什么好处-如何实现路由懒加载"><a href="#什么是路由懒加载-路由懒加载有什么好处-如何实现路由懒加载" class="headerlink" title="什么是路由懒加载? 路由懒加载有什么好处? 如何实现路由懒加载?"></a>什么是路由懒加载? 路由懒加载有什么好处? 如何实现路由懒加载?</h2><p>路由懒加载是指通过异步的方式来加载对应的路由组件(默认情况是将所有的组件全部加载并打包).<br>路由懒加载的好处: 可以提高页面的加载速度, 尤其是首页的加载速度(因为使用了懒加载后, 加载首页的时候, 就不需要加载其他页面对应的组件, 在需要的时候再加载)<br>具体实现:</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-keyword">import</span> Vue <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>;<br><span class="hljs-keyword">import</span> Router <span class="hljs-keyword">from</span> <span class="hljs-string">'vue-router'</span>;<br><span class="hljs-comment">/*异步导入组件 */</span> <br><span class="hljs-comment">/*异步加载方式一*/</span> <br><span class="hljs-keyword">const</span> List = <span class="hljs-function"><span class="hljs-params">resolve</span> =&gt;</span> <span class="hljs-built_in">require</span>([<span class="hljs-string">'@/components/list'</span>], resolve);<br><span class="hljs-comment">/*异步加载方式二*/</span> <br><span class="hljs-keyword">const</span> Detail = <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> <span class="hljs-keyword">import</span>( <span class="hljs-comment">/* webpackChunkName: "group-master" */</span> <span class="hljs-string">'@/components/detail'</span>)<br><br>Vue.use(Router);<br><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-keyword">new</span> Router(&#123;<br>    <span class="hljs-comment">/*路由规则*/</span> <br>    routes: [&#123;<br>            path: <span class="hljs-string">'/list'</span>,<br>            component: List<br>        &#125;,<br>        &#123;<br>            path: <span class="hljs-string">'/detail'</span>,<br>            component: Detail<br>        &#125;<br>    ],<br>    <span class="hljs-comment">/*路由模式: 默认hash, 可选值hash(如#/index)|history(/index)*/</span> <br>    mode: <span class="hljs-string">'history'</span><br>&#125;);<br></code></pre></td></tr></table></figure>

<h2 id="Vue中如何触发一个自定义事件"><a href="#Vue中如何触发一个自定义事件" class="headerlink" title="Vue中如何触发一个自定义事件?"></a>Vue中如何触发一个自定义事件?</h2><p>通过<code>this.$emit(event, ’数据’)</code> 可以触发自定义事件的执行.</p>
<h2 id="Vue中如何监听自定义事件的执行"><a href="#Vue中如何监听自定义事件的执行" class="headerlink" title="Vue中如何监听自定义事件的执行?"></a>Vue中如何监听自定义事件的执行?</h2><p>通过<code>this.$on(event, callback)</code>可以监听自定义事件的执行</p>
<h2 id="Vue中如何移除自定义事件"><a href="#Vue中如何移除自定义事件" class="headerlink" title="Vue中如何移除自定义事件?"></a>Vue中如何移除自定义事件?</h2><p>通过<code>this.$off(event, callback)</code>可以移除一个自定义事件; 如果某些特殊场景下, 一个事件被触发一次后就需要将其移除, 可以使用<code>this.$once(event, callback)</code>进行事件注册</p>
<h2 id="vm-mount-selector-方法的作用是什么"><a href="#vm-mount-selector-方法的作用是什么" class="headerlink" title="vm.$mount(selector)方法的作用是什么?"></a>vm.$mount(selector)方法的作用是什么?</h2><p>手动将一个vue实例挂载到页面上</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-keyword">var</span> MyComponent = Vue.extend(&#123;<br>    template: <span class="hljs-string">'&lt;div&gt;Hello!&lt;/div&gt;'</span><br>&#125;)<br><span class="hljs-comment">/* 创建并挂载到 #app (会替换 #app)*/</span><br><span class="hljs-keyword">new</span> MyComponent().$mount(<span class="hljs-string">'#app'</span>)<br><span class="hljs-comment">/* 同上*/</span><br><span class="hljs-keyword">new</span> MyComponent(&#123;<br>    el: <span class="hljs-string">'#app'</span><br>&#125;)<br></code></pre></td></tr></table></figure>

<h2 id="Vue中keep-alive组件的作用是什么"><a href="#Vue中keep-alive组件的作用是什么" class="headerlink" title="Vue中keep-alive组件的作用是什么?"></a>Vue中keep-alive组件的作用是什么?</h2><p><code>keep-alive</code> 可以将被包裹的组件暂存在内存当中, 当页面切换的时候, 组件不会被重复的销毁和创建, 从而可以提高整体性能, 同时也可以保存组件的一些状态.</p>
<h2 id="Vue中如何手动销毁一个vue实例"><a href="#Vue中如何手动销毁一个vue实例" class="headerlink" title="Vue中如何手动销毁一个vue实例?"></a>Vue中如何手动销毁一个vue实例?</h2><p>调用 <code>vm.$destroy()</code> 可销毁一个vue实例(清理它与其它实例的连接，解绑它的全部指令及事件监听器)</p>
<h2 id="Vue中有哪些内置的组件"><a href="#Vue中有哪些内置的组件" class="headerlink" title="Vue中有哪些内置的组件?"></a>Vue中有哪些内置的组件?</h2><p><code>component, slot, transition, transition-group, keep-alive</code> </p>
<!-- 动态组件由 vm 实例的属性值 `componentId` 控制 -->
<p><code>&lt;component :is=&quot;componentId&quot;&gt;&lt;/component&gt;</code> </p>
<!--tansition动画组件的使用-->

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">transition</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">v-if</span>=<span class="hljs-string">"ok"</span>&gt;</span>toggled content<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">transition</span>&gt;</span><br></code></pre></td></tr></table></figure>

<h2 id="vue实例中有哪些属性"><a href="#vue实例中有哪些属性" class="headerlink" title="vue实例中有哪些属性?"></a>vue实例中有哪些属性?</h2><p><code>vm.$data</code>可以获取vm实例对象data中的数据;<br><code>vm.$props</code>可以获取vm组件接收到的 props 对象数据;<br><code>vm.$el</code>可以获取vm实例对象的根dom元素; </p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-keyword">var</span> MyComponent = Vue.extend(&#123;<br>    template: <span class="hljs-string">'&lt;div&gt;Hello!&lt;/div&gt;'</span><br>&#125;)<br></code></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-comment">/* 在文档之外渲染并且随后挂载*/</span><br><span class="hljs-keyword">var</span> vm = <span class="hljs-keyword">new</span> MyComponent().$mount()<br><span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'app'</span>).appendChild(vm.$el)<br></code></pre></td></tr></table></figure>

<p><code>vm.$refs</code>可以获取vm实例中注册过 ref 特性的所有dom元素和组件实例.</p>
<h2 id="Vue-use-plugin-的作用是什么-使用的时候需要注意什么问题"><a href="#Vue-use-plugin-的作用是什么-使用的时候需要注意什么问题" class="headerlink" title="Vue.use(plugin)的作用是什么, 使用的时候需要注意什么问题?"></a>Vue.use(plugin)的作用是什么, 使用的时候需要注意什么问题?</h2><p>Vue.use的作用是安装一个Vue插件, 该方法需要在调用 new Vue() 之前被调用.</p>
<h2 id="vm-nextTick-fn-的作用是什么"><a href="#vm-nextTick-fn-的作用是什么" class="headerlink" title="vm.$nextTick(fn)的作用是什么?"></a>vm.$nextTick(fn)的作用是什么?</h2><p>延迟某个操作的执行, 直到dom更新以后在执行.</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app"</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">h1</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">"h1"</span>&gt;</span>&#123;&#123;title&#125;&#125;<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br></code></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-keyword">var</span> vm = <span class="hljs-keyword">new</span> Vue(&#123;<br>    el: <span class="hljs-string">'#app'</span>,<br>    data: &#123;<br>        title: <span class="hljs-string">'这是一个标题'</span><br>    &#125;<br>    created: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>&#123;<br>        <span class="hljs-keyword">this</span>.$nextTick(<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> &#123;<br>            <span class="hljs-comment">/*在created里直接操作ref会报错*/</span> <br>            <span class="hljs-keyword">this</span>.$refs.hinnerHTML = <span class="hljs-string">'这是更新以后的标题'</span>;<br>        &#125;);<br>    &#125;<br>&#125;);<br></code></pre></td></tr></table></figure>

<h2 id="vue中的混入-mixin-有什么作用"><a href="#vue中的混入-mixin-有什么作用" class="headerlink" title="vue中的混入(mixin)有什么作用?"></a>vue中的混入(mixin)有什么作用?</h2><p>混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。<br>当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。比如，数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。</p>
<h2 id="如何开发一个vue插件"><a href="#如何开发一个vue插件" class="headerlink" title="如何开发一个vue插件?"></a>如何开发一个vue插件?</h2><p>Vue.js 的插件应该暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-keyword">const</span> myPlugin = &#123;<br>    install: <span class="hljs-function">(<span class="hljs-params">Vue, options</span>) =&gt;</span> &#123;<br>        <span class="hljs-comment">/*  添加全局方法或属性*/</span><br>        Vue.myGlobalMethod = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>&#123;<br>            <span class="hljs-comment">/* 逻辑...*/</span><br>        &#125;<br>        <span class="hljs-comment">/*  添加全局指令*/</span><br>        Vue.directive(<span class="hljs-string">'my-directive'</span>, &#123;<br>            bind(el, binding, vnode, oldVnode) &#123;<br>                <span class="hljs-comment">/* 逻辑...*/</span><br>            &#125;<br>        &#125;)<br>        <span class="hljs-comment">/*  添加实例方法*/</span><br>        Vue.prototype.$myMethod = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">methodOptions</span>) </span>&#123;<br>            <span class="hljs-comment">/* 逻辑...*/</span><br>        &#125;<br>        <span class="hljs-comment">/*  注入组件选项(混入)*/</span><br>        Vue.mixin(&#123;<br>            created: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>&#123;<br>                <span class="hljs-comment">/* 逻辑...*/</span><br>            &#125;<br>        &#125;)<br>        <span class="hljs-comment">/*  注册全局组件*/</span><br>        Vue.component(<span class="hljs-string">'myCompent'</span>, &#123;<br>            template: <span class="hljs-string">'&lt;h1&gt;loading...&lt;/h1&gt;'</span><br>        &#125;);<br><br>    &#125;<br>&#125;<br><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> myPlugin;<br><span class="hljs-comment">/* 调用插件*/</span><br>Vue.use(myPlugin, &#123;&#125;)<br></code></pre></td></tr></table></figure>

<h2 id="什么是ssr-如何实现ssr"><a href="#什么是ssr-如何实现ssr" class="headerlink" title="什么是ssr? 如何实现ssr?"></a>什么是ssr? 如何实现ssr?</h2><p><code>ssr</code> 是全拼( <code>server side rendering</code> ) , 中文意思, 服务端渲染, 让页面的渲染在服务端完成, 生产环境必须部署 <code>nodeJS</code> 的环境, 因为服务端渲染必须借助 <code>nodeJS</code> 来完成. <code>vue</code> 中可以使用 <code>nuxt</code> 框架实现服务端渲染.</p>
<h2 id="什么是SPA"><a href="#什么是SPA" class="headerlink" title="什么是SPA?"></a>什么是SPA?</h2><p><code>SPA(Single Page Application)</code> , 单页面应用程序, 使用 <code>vue, react, angular</code> 创建的项目都属于SPA. 因为整个项目只有一个页面, 其他页面都是在该页面的基础上局部刷新而来的.<br>传统方式创建的项目都是 <code>MPA(Mutilple Page Application)</code> 多页面应用程序.</p>
<h2 id="使用vue-react-angular开发的SPA单页面应用有什么优缺点"><a href="#使用vue-react-angular开发的SPA单页面应用有什么优缺点" class="headerlink" title="使用vue, react, angular开发的SPA单页面应用有什么优缺点?"></a>使用vue, react, angular开发的SPA单页面应用有什么优缺点?</h2><p>单页面应用虽然性能方面得到了提升, 但是有一个致命的缺点就是不利于seo, 搜索引擎几乎不会抓取单页面应用.</p>

      
       <hr><span style="font-style: italic;color: gray;"> 请你也把我遗弃在远方, 让我享受这可怕的绝望, 当你终于感到了悲伤, 我在回来为你歌唱 </span>
    </div>
</article>


<p>
    <a  class="dashang" onclick="dashangToggle()">赏</a>
</p>




    <div id="comments"></div>
<link rel="stylesheet" href="https://jjeejj.github.io/css/gitment.css">

<script src="/js/gitment.js"></script>

<script>
    var gitment = new Gitment({
        id: 'http://blog.duans.top/2020/03/24/client/vue/', // 可选。默认为 location.href
        owner: 'duanshaobo',
        repo: 'blog.duans.top',
        oauth: {
            client_id: '76fd9510b156417889ed',
            client_secret: 'c63458b7f62b1b672250331443a554f3e8be05b3',
        },
    })
    gitment.render('comments')
</script>




    




    </div>
    <div class="copyright">
        <p class="footer-entry">Copyright©2020 www.duans.top</p>
<!-- <p class="footer-entry">Built with <a href="https://hexo.io/" target="_blank">Hexo</a> and <a href="https://github.com/yelog/hexo-theme-3-hexo" target="_blank">3-hexo</a> theme</p> -->

    </div>
    <div class="full-toc">
        <button class="full"><span class="min "></span></button>
<button class="post-toc-menu"><span class="post-toc-menu-icons"></span></button>
<div class="post-toc"><span class="post-toc-title">目录</span>
    <div class="post-toc-content">

    </div>
</div>
<a class="" id="rocket" ></a>

    </div>
</div>
<div class="acParent"></div>

<div class="hide_box" onclick="dashangToggle()"></div>
<div class="shang_box">
    <a class="shang_close"  onclick="dashangToggle()">×</a>
    <div class="shang_tit">
        <p>喜欢就点赞,疼爱就打赏</p>
    </div>
    <div class="shang_payimg">
        <div class="pay_img">
            <img src="/img/alipay.jpg" class="alipay" title="扫码支持">
            <img src="/img/weixin.jpg" class="weixin" title="扫码支持">
        </div>
    </div>
    <div class="shang_payselect">
        <span><label><input type="radio" name="pay" checked value="alipay">支付宝</label></span><span><label><input type="radio" name="pay" value="weixin">微信</label></span>
    </div>
</div>


</body>
<script src="/js/jquery.pjax.js?v=1.0.1" ></script>

<script src="/js/script.js?v=1.0.1" ></script>
<script>
    var img_resize = 'default';
    /*作者、标签的自动补全*/
    $(function () {
        $('.search').AutoComplete({
            'data': ['@duans','@duans','#vue','#前端基础','#react','#minapp','#javascript','#angular','#mongodb','#jquery','#nginx','#mysql','#apache','#webapi','#性能优化','#ajax','#html5','#css3','#es6','#es7','#es8','#代码分析','#js基础','#构建工具','#混合app','#混合开发','#webSocket',],
            'itemHeight': 20,
            'width': 418
        }).AutoComplete('show');
    })
    function initArticle() {
        /*渲染对应的表格样式*/
        

        /*渲染打赏样式*/
        
        $("input[name=pay]").on("click", function () {
            if($("input[name=pay]:checked").val()=="weixin"){
                $(".shang_box .shang_payimg .pay_img").addClass("weixin_img");
            } else {
                $(".shang_box .shang_payimg .pay_img").removeClass("weixin_img");
            }
        })
        

        /*高亮代码块行号*/
        

        /*访问数量*/
        
        $.getScript("//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js");
        

        /*代码高亮，行号对齐*/
        $('.pre-numbering').css('line-height',$('.has-numbering').css('line-height'));

        
        
    }

    /*打赏页面隐藏与展示*/
    
    function dashangToggle() {
        $(".shang_box").fadeToggle();
        $(".hide_box").fadeToggle();
    }
    

</script>

<!--加入行号的高亮代码块样式-->

<!--自定义样式设置-->
<style>
    
    
    .nav {
        width: 582px;
    }
    .nav.fullscreen {
        margin-left: -582px;
    }
    .nav-left {
        width: 160px;
    }
    
    
    @media screen and (max-width: 1468px) {
        .nav {
            width: 532px;
        }
        .nav.fullscreen {
            margin-left: -532px;
        }
        .nav-left {
            width: 140px;
        }
    }
    
    
    @media screen and (max-width: 1024px) {
        .nav {
            width: 532px;
            margin-left: -532px
        }
        .nav.fullscreen {
            margin-left: 0;
        }
        .nav .hide-list.fullscreen {
            left: 532px
        }
    }
    
    @media screen and (max-width: 426px) {
        .nav {
            width: 100%;
        }
        .nav-left {
            width: 100%;
        }
    }
    
    
    .nav-right .title-list nav a .post-title, .nav-right .title-list #local-search-result a .post-title {
        color: #383636;
    }
    
    
    .nav-right .title-list nav a .post-date, .nav-right .title-list #local-search-result a .post-date {
        color: #5e5e5f;
    }
    
    
    .nav-right nav a.hover, #local-search-result a.hover{
        background-color: #e2e0e0;
    }
    
    

    /*列表样式*/
    
    .post .pjax article .article-entry>ol, .post .pjax article .article-entry>ul, .post .pjax article>ol, .post .pjax article>ul{
        border: #e2dede solid 1px;
        border-radius: 10px;
        padding: 10px 32px 10px 56px;
    }
    .post .pjax article .article-entry li>ol, .post .pjax article .article-entry li>ul,.post .pjax article li>ol, .post .pjax article li>ul{
        padding-top: 5px;
        padding-bottom: 5px;
    }
    .post .pjax article .article-entry>ol>li, .post .pjax article .article-entry>ul>li,.post .pjax article>ol>li, .post .pjax article>ul>li{
        margin-bottom: auto;
        margin-left: auto;
    }
    .post .pjax article .article-entry li>ol>li, .post .pjax article .article-entry li>ul>li,.post .pjax article li>ol>li, .post .pjax article li>ul>li{
        margin-bottom: auto;
        margin-left: auto;
    }
    

    /* 背景图样式 */
    
    


    /*引用块样式*/
    

    /*文章列表背景图*/
    
    .nav-right:before {
        content: ' ';
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        opacity: 0.4;
        background: url("/img/article-list-background-1.jpg");
        background-repeat: no-repeat;
        background-position: 50% 0;
        -ms-background-size: cover;
        -o-background-size: cover;
        -moz-background-size: cover;
        -webkit-background-size: cover;
        background-size: cover;
    }
    

    
    .post .pjax article :not(pre) > code {
        color: #24292e;
        font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace;
        background-color: rgba(27,31,35,.05);
        border-radius: 3px;
        font-size: 85%;
        margin: 0;
        padding: .2em .4em;
    }
    
</style>







</html>
